@extends('default.layouts.companyPublic')
@section('title', '企业相册')
@section('headcss')
    @parent
    <link rel="stylesheet" href="{{asset('/default/css/company/list.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('/vendor/webuploader/css/webuploader.css')}}">
@endsection

@section('rightcon')

    <div class="right">
        <div class="jright">
            <div class="content">
                <div class="jobtitle">
                    <div class="tithead">
                        <ul>
                            <li><a href="{{url('company/basic_info')}}">基本资料</a></li>
                            <li><a href="{{url('company/license_sub')}}">企业认证</a></li>
                            <li><a href="{{url('company/department')}}">部门管理</a></li>
                            <li><a href="{{url('company/map')}}">地图坐标</a></li>
                            <li class="active"><a href="{{url('company/photo')}}">企业相册</a></li>
                        </ul>
                    </div>
                </div>
                <div id="uploader" class="uploader">
                    <!--用来存放文件信息-->
                    <div class="title">照片上传</div>
                    <div id="thelist" class="uploader-list"></div>
                    <div class="btns">
                        <div id="picker" class="ydiv">选择文件</div>
                        <button id="ctlBtn">开始上传</button>
                    </div>
                </div>
                <div class="imglist">
                @if($companyPhoto->count() > 0 )
                    @foreach($companyPhoto as $v)
                    <dl id="photo_{{$v->id}}">
                        <dd><img src="{{$v->file}}" width="199" height="199" alt=""/></dd>
                        <dt><a data-value="{{$v->id}}"><i></i>删除</a></dt>
                    </dl>
                    @endforeach
                @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footerjs')
    @parent
    <script type="text/javascript" src="{{asset('/vendor/webuploader/dist/webuploader.min.js')}}"></script>
    <script type="text/javascript">
	$("#leftnav_data").addClass("active");
	
	var uploader = WebUploader.create({
	
		// swf文件路径
		swf: BASE_URL + 'vendor/webuploader/dist/Uploader.swf',
	
		// 文件接收服务端。
		server: "{{asset('/company/photo/photoupload')}}?_token={{csrf_token()}}",
	
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: {
			id: '#picker',
			name:"file", //这个地方 name 没什么用，虽然打开调试器，input的名字确实改过来了。但是提交到后台取不到文件。如果想自定义file的name属性，还是要和fileVal 配合使用。
			label: '选择图片',
			multiple:true //默认为true，就是可以多选
		},
		
		fileNumLimit: 20,//单次最大文件数
		
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png'
		},
	
		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        fileSingleSizeLimit: 2000 * 1024
    });
    //上传文件出错时
    uploader.on('error', function(file){
        if(file == 'F_EXCEED_SIZE'){
            layer.msg('文件大小不能超过2M！',{time:1200});
        }
        if(file == 'F_DUPLICATE'){
            layer.msg('此文件已经存在队列当中，不能重复上传！',{time:1200});
        }
        if(file == 'Q_EXCEED_NUM_LIMIT'){
            layer.msg('你已经上传了文件！',{time:1200});
        }
        if(file == 'Q_TYPE_DENIED'){
            layer.msg('文件类型不匹配，请重新上传！',{time:1200});
        }
    });
	uploader.on( 'fileQueued', function( file ) {
    $("#thelist").append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p class="state">等待上传...</p>' +
    '</div>' );
	});
	
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
		var $li = $( '#'+file.id );
		$li.find('p.state').text('上传中...');
	})
	uploader.on( 'uploadSuccess', function( file,response ) {
		$( '#'+file.id ).find('p.state').text('已上传');
        $(".imglist" ).prepend('<dl id="photo_'+response.id+'"><dd><img src="'+response.url+'" width="199" height="199" alt=""/></dd><dt><a data-value="'+response.id+'"><i></i>删除</a></dt></dl>');
        $(".imglist img").eq(0).click(function(){
            layer.photos({
                photos: photojson,
                tab: function(pic, layero){
                    //console.log(pic) //当前图片的一些信息
                }
            });
        });
        $(".imglist a").eq(0).click(function(){
            var othis=this;
            $.ajax({
                type: "GET",
                url: "{{asset('/company/photo/photodelete')}}"+"/"+$(this).attr("data-value"),
                dataType: "json",
                success: function(msg){
                    $("#photo_"+$(othis).attr("data-value")).remove();
                }
            });
        });
        photojson.data.unshift({
            "alt": response.url,
            "pid": response.id, //图片id
            "src": response.url, //原图地址
            "thumb": "" //缩略图地址
        });
	});

	uploader.on( 'uploadError', function( file ) {
		$( '#'+file.id ).find('p.state').text('上传出错');
	});

	uploader.on( 'uploadFinished', function( file ) {

	});
	$("#ctlBtn").click( function () {
        uploader.upload();
	});
    @if($companyPhoto->count() > 0 )
    var photojson={
        "title": "", //相册标题
        "id": 123, //相册id
        "start": 0, //初始显示的图片序号，默认0
        "data": [   //相册包含的图片，数组格式
            @foreach($companyPhoto as $k=>$v)
            {
                "alt": "{{$v->file}}",
                "pid": "{{$v->id}}", //图片id
                "src": "{{$v->file}}", //原图地址
                "thumb": "" //缩略图地址
            }@if(count($companyPhoto)!=($k+1)), @endif
            @endforeach
        ]
    };
    @else
    var photojson={
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": []
            };
    @endif
    $(".imglist img").click(function(){
        layer.photos({
            photos: photojson,
            tab: function(pic, layero){
                //console.log(pic) //当前图片的一些信息
            }
        });
    });

    $(".imglist a").click(function(){
        var othis=this;
        $.ajax({
            type: "GET",
            url: "{{asset('/company/photo/photodelete')}}"+"/"+$(this).attr("data-value"),
            dataType: "json",
            success: function(msg){
                $("#photo_"+$(othis).attr("data-value")).remove();
            }
        });
    });

	</script>
@endsection
